<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
    <link rel="stylesheet" href="../css/e.css">
    <link rel="stylesheet" href="../css/log.css">
    <title>Document</title>
</head>

<body>
    <!-- <div class="app1">
        <el-row :gutter="12">
            <el-col :span="8">
                <el-card shadow="hover" :title="num.all">
                    总访问量:{{num.all}}
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover">
                    独立IP：{{num.ip_all}}
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover">
                    月访问：{{num.m_all}}
                </el-card>
            </el-col>
        </el-row>
    </div> -->

    <div id="app">
        <el-row :gutter="12">
            <el-col :span="8">
                <el-card shadow="hover" :title="num.all">
                    总访问量:{{num.all}}
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover">
                    独立IP：{{num.ip_all}}
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover">
                    月访问：{{num.m_all}}
                </el-card>
            </el-col>
        </el-row>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>周访问量</span>
            </div>
            <div class="text item">
                <ve-line :data="chartData" :settings="chartSettings"></ve-line>
            </div>
        </el-card>

        <div class="box">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>来源占比</span>
                </div>
                <div class="text item">
                    <ve-pie :data="source_data" :settings="source"></ve-pie>
                </div>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>浏览器占比</span>
                </div>
                <div class="text item">
                    <ve-pie :data="bro_data" :settings="bro"></ve-pie>
                </div>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>设备占比</span>
                </div>
                <div class="text item">
                    <ve-pie :data="os_data" :settings="os"></ve-pie>
                </div>
            </el-card>
        </div>

        <div class="box">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>热门页面</span>
                    <div class="buttons">
                        <el-button type="primary" plain @click.native="select_top(1)">今天</el-button>
                        <el-button type="primary" plain @click.native="select_top(2)">最近一周</el-button>
                        <el-button type="primary" plain @click.native="select_top(3)">最近一月</el-button>
                    </div>
                </div>
                <div class="text item">
                    <el-table :data="href" stripe style="width: 100%">
                        <el-table-column prop="title" label="标题">
                        </el-table-column>
                        <el-table-column prop="href" label="地址">
                        </el-table-column>
                        <el-table-column prop="ip" label="IP">
                        </el-table-column>
                        <el-table-column prop="city" label="城市">
                        </el-table-column>
                        <el-table-column prop="num" label="数量">
                        </el-table-column>
                        <el-table-column prop="times" label="时间">
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </div>
        

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>用户分布</span>
            </div>
            <div class="text item">
                <ve-map :data="city_data"></ve-map>
            </div>
        </el-card>

    </div>
</body>
<script src="../../common/a.js"></script>
<script src="../../common/v.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-amap/dist/echarts-amap.min.js"></script>
<script src="../js/e.js"></script>
<script src="../js/log.js"></script>

</html>